<template>
    <div class="login-container">
        <div class="login-card">
            <h2 class="login-title">欢迎登录</h2>
            <el-form ref="ruleFormRef" :model="login" status-icon class="login-form">
                <el-form-item>
                    <el-input v-model="login.userName" placeholder="用户名" prefix-icon="el-icon-user"
                        class="login-input" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="login.userPass" type="password" show-password placeholder="密码"
                        prefix-icon="el-icon-lock" class="login-input" />
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="login.Set" class="remember-me">
                        记住密码
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm" class="login-button">
                        登 录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 50%, #fbc2eb 100%);
    background-size: 200% 200%;
    animation: gradient 15s ease infinite;
}

.login-card {
    width: 400px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    animation: fadeIn 0.6s ease-out;
}

.login-title {
    margin-bottom: 30px;
    color: #333;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
}

.login-form {
    margin-top: 20px;
}

.login-input {
    margin-bottom: 20px;
}

.login-input :deep(.el-input__inner) {
    height: 48px;
    font-size: 16px;
}

.login-button {
    width: 100%;
    height: 48px;
    font-size: 16px;
    letter-spacing: 2px;
    transition: all 0.3s;
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.remember-me {
    color: #666;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
</style>

<script lang="ts" setup>
import axios from 'axios'
import { onMounted, reactive, ref } from 'vue'
import { Read, Write } from '@/Http/axios'
import { ElMessage } from "element-plus";
import { useCounterStore } from '@/stores/counter';
import router from '@/router'
const store = useCounterStore();
const login = reactive({
    "userName": "",
    "userPass": "",
    Set: false,
})
//记住密码功能
const set = () => {
    if (localStorage.getItem("userName") != null) {

        login.userName = localStorage.getItem("userName")!
        login.userPass = localStorage.getItem("userPass")!
        login.Set = true
    }
}

const submitForm = () => {
    Read.post("/Management/LoginShow", login).then(res => {
        if (res.data.code = 100) {

            //记住密码功能
            if (login.Set) {
                localStorage.setItem("userName", login.userName)
                localStorage.setItem("userPass", login.userPass)
            }
            else {
                localStorage.removeItem("userName")
                localStorage.removeItem("userPass")
            }

            store.current.roleId = res.data.data.roleId
            store.current.roleName = res.data.data.roleName
            store.current.token = res.data.data.token
            store.current.userId = res.data.data.userId
            store.current.userName = res.data.data.userName
            store.current.userNickname = res.data.data.userNickname
            ElMessage.success(res.data.message);
            router.push({ path: "/Main" })
        }
        else {
            ElMessage.error(res.data.message)
        }
    })
}
//钩子函数
onMounted(() => {
    set()
})

</script>
